<template>
    <div class="main">
        <!-- 顶部导航栏显示隐藏 -->
        <div class="my_Top" :style="{backgroundColor:'rgba(252, 215, 50, '+opcy+')'}">
            <div class="Mycontainer">
                <div class="my_Top_ImgBox">
                    <div class="my_Top_Img" :style="{width:bgsize+'px',height:bgsize+'px'}">
                        <img src="https://img0.baidu.com/it/u=4174622592,2828273755&fm=253&fmt=auto&app=120&f=JPEG?w=192&h=192" alt="">
                    </div>
                </div>
                <div class="my_Top_Text" :style="{opacity:opcy}">
                    <span>我的</span>
                </div>
                <div class="myInformBox">
                    <span class="iconfont icon-tongzhi myInform"></span>
                    <span class="myInform_news">0</span>
                </div>
            </div>
        </div>
        <!-- 资产信息 -->
        <div class="my_info">
            <div class="Mycontainer">
                <div class="my_user">
                    <p class="my_user_name">我自己</p>
                    <p class="my_user_level">Lv&nbsp;5</p>
                </div>
                <div class="my_property">
                    <!-- 我的金币 -->
                    <div class="my_property_gold">
                        <p class="gold_number">12020</p>
                        <p>我的金币</p>
                        <span class="gold_price">约1.2元</span>
                    </div>
                    <!-- 今日金币 -->
                    <div class="my_property_gold">
                        <p class="gold_number">12020</p>
                        <p>今日金币</p>
                    </div>
                    <!-- 阅读时长 -->
                    <div class="my_property_gold">
                        <p class="gold_number">0</p>
                        <p>今日阅读(分钟)</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 钱包选项 -->
        <div class="my_options">
            <div class="Mycontainer">
                <!-- 阅读历史 -->
                <!-- <div class="my_options_box"> -->
                <router-link to="/readHistory" tag="div" class="my_options_box">
                    <div class="iconfont icon-yuedulishi my_pc"></div>
                    <div class="my_pctext">
                        <span>阅读历史</span>
                    </div>
                </router-link>
                <!-- </div> -->
                <!-- 金币提现 -->
                <div class="my_options_box" @click="cashBtn">
                    <div class="iconfont icon-qianbao my_pc"></div>
                    <div class="my_pctext">
                        <span>金币提现</span>
                    </div>
                </div>
                <!-- 邀请好友 -->
                <div class="my_options_box" @click="cashBtn">
                    <div class="iconfont icon-yaoqinghaoyou1 my_pc"></div>
                    <div class="my_pctext">
                        <span>邀请好友</span>
                    </div>
                </div>
                <!-- VIP会员 -->
                <!-- <div class="my_options_box"> -->
                <router-link tag="div" to="/member" class="my_options_box">
                    <div class="iconfont icon-VIP my_pc"></div>
                    <div class="my_pctext">
                        <span>VIP会员</span>
                    </div>
                </router-link>
                <!-- </div> -->
            </div>
        </div>
        <!-- 开通会员图片 -->
        <!-- <div class="VIP_Img">
            <img src="" alt="">
        </div> -->
        <!-- 邀请码和福利中心 -->
        <div class="Invitation_Box">
            <div class="Mycontainer">
                <div class="Invitation_Code" @click="showPopup">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">邀请码</p>
                        <p class="ICT_Tips">选择填写,没有可不填写</p>
                    </div>
                    <div class="arrow_right">
                        <span class="iconfont icon-youjiantou1 ar_rf"></span>
                    </div>
                </div>
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">福利中心</p>
                    </div>
                    <div class="arrow_right">
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        <!-- <div class="ar_dot"></div> -->
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 幸运大转盘 -->
        <div class="turnplate_Box">
            <div class="Mycontainer">
                <div class="turnplate" @click="prizeBtn">
                    <span class="iconfont icon-dazhuanpan"></span>
                    <p>幸运大转盘</p>
                </div>
            </div>
        </div>
        <!-- 设置 -->
        <div class="Invitation_Box">
            <div class="Mycontainer">
                <!-- 书友圈 -->
                <!-- <div class="Invitation_Code">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">书友圈</p>
                    </div>
                    <div class="arrow_right">
                        <span class="ar_Text">有新的书友推荐</span>
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        <div class="ar_dot"></div>
                        </span>
                    </div>
                </div> -->
                <!-- 我的评论 -->
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">我的评论</p>
                    </div>
                    <div class="arrow_right">
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        </span>
                    </div>
                </div>
                <!-- 我的必读票 -->
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">我的必读票</p>
                    </div>
                    <div class="arrow_right">
                        <!-- <span class="ar_Text">剩余<span>11</span>张必读票</span> -->
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        </span>
                    </div>
                </div>
                <!-- 我的阅读喜好 -->
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">我的阅读喜好</p>
                    </div>
                    <div class="arrow_right">
                        <!-- <span class="ar_Text">男生</span> -->
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        </span>
                    </div>
                </div>
                <!-- 帮助与反馈 -->
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">帮助与反馈</p>
                    </div>
                    <div class="arrow_right">
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        </span>
                    </div>
                </div>
                <!-- 申请成为作家 -->
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">申请成为作家</p>
                    </div>
                    <div class="arrow_right">
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        </span>
                    </div>
                </div>
                <!-- 青少年模式 -->
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">青少年模式</p>
                    </div>
                    <div class="arrow_right">
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        </span>
                    </div>
                </div>
                <!-- 设置 -->
                <div class="Invitation_Code" @click="cashBtn">
                    <div class="Invitation_Code_Text">
                        <p class="ICT_Title">设置</p>
                    </div>
                    <div class="arrow_right">
                        <span class="iconfont icon-youjiantou1 ar_rf">
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="logOut"> -->
        <router-link class="logOut" to="/Login" tag="div">
            <span>退出登录</span>
        </router-link>
        <!-- </div> -->
        <van-popup class="vanPopup" v-model="show" round position="bottom" :style="{ height: '25%' }" >
            <div class="botTitle">
                <span>请输入邀请码</span>
            </div>
            <div class="botInput">
                <input type="text" v-model="InvitationCode">
            </div>
            <div class="botBtn">
                <span @click="InvitationCodeBtn">确定</span>
            </div>
        </van-popup>
        <bottomNav></bottomNav>
    </div>
</template>

<script>
import { Toast } from 'vant';
import bottomNav from "../../components/base/bottomNav.vue"
export default {
    data(){
        return{
            opcy:0,
            bgsize:60,
            show: false,
            InvitationCode:'',
        }
    },
    methods:{
        // 邀请码按钮
        InvitationCodeBtn(){
            if(this.InvitationCode == ''){
                Toast("请检查输入的邀请码是否正确")
                return;
            }
            Toast("邀请码兑换成功");
            this.InvitationCode = '';
            this.show = false
        },
        // 底部显示功能
        showPopup() {
            this.show = true;
        },
        // 提现功能
        cashBtn(){
            Toast("功能尚未开放")
        },
        // 抽奖按钮
        prizeBtn(){
            Toast("经验+"+3)
        },
        // 获取页面高度显示隐藏
        handleScroll(){
            let height = window.pageYOffset;
            // let top = this.$refs.backTop.getBoundingClientRect().top;
            // console.log('滚动高度',height)
            // console.log('距离顶部高度',top);
            this.opcy = height > 50? 1 : 0;
            this.bgsize = height >30? 30 : 60;
            // console.log('用户信息=>',this.playlist)
            // console.log(window.localStorage,window.localStorage.uid,this.getUserDetaiFun())
        },
    },
    components:{
        bottomNav
    },
    mounted(){
        window.addEventListener('scroll',this.handleScroll,true)
    }
}
</script>

<style lang="less">
@import "../../assets/css/base.css";
.Mycontainer{
    width: 89%;
    margin: 0px auto;
}
.my_Top{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transition: all 0.1s linear;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    .Mycontainer{
        display:flex;
        .my_Top_ImgBox{
            flex: 2;
            width: 100%;
            height: 100%;
            .my_Top_Img{
                width: 30px;
                height: 30px;
                margin: 10px 0px;
                background-color: aqua;
                border-radius: 50%;
                overflow: hidden;
                transition: all 0.1s linear;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .my_Top_Text{
            flex: 8;
            // display: none;
            span{
                font-size: 20px;
                font-weight: bold;
            }
        }
        .myInformBox{
            flex: 2;
            text-align: right;
            position: relative;
            .myInform{
                font-size: 28px;
            }
            .myInform_news{
                position: absolute;
                line-height: 12px;
                padding: 2px;
                top: 10px;
                right: -4px;
                font-size: 12px;
                background-color: #ff5f0f;
                border-radius: 50%;
                color: white;
            }
        }
    }
}
.my_info{
    width: 100%;
    // background-color: #fdd327;
    background-image: linear-gradient(to right,rgb(255, 223, 43),#fdd327);
    .my_user{
        width: 68%;
        margin-left: 70px;
        padding-top: 12px;
        padding-bottom: 40px;
        .my_user_name{
            font-size: 19px;
            line-height: 32px;
            font-weight: bold;
        }
        .my_user_level{
            width: 26px;
            font-size: 13px;
            line-height: 12px;
            padding: 2px 6px;
            border-radius: 20px;
            background-image: linear-gradient(to right,#e4e4e4,#c8c8cd);
            color: white;
        }
    }
    .my_property{
        display: flex;
        justify-content: space-between;
        .my_property_gold{
            position: relative;
            width: 28%;
            text-align: center;
            margin: 10px 0px;
            padding-right: 14px;
            border-right: 1px solid #ccc;
            p{
                font-size: 14px;
            }
            p.gold_number{
                font-size: 22px;
                font-weight: bold;
            }
            span.gold_price{
                position: absolute;
                top: -22px;
                right: 7px;
                font-size: 12px;
                background-color: #ff5f0e;
                color: white;
                padding: 2px 6px;
                padding-right: 7px;
                border-radius: 10px 10px 10px 0px;
            }
        }
        .my_property_gold:last-child{
            padding-right: 0px;
            border-right: 0px;
        }
    }
}
.my_options{
    width: 100%;
    height: 50%;
    padding: 10px 0px;
    background-color: #fff;
    margin-bottom: 10px;
    .Mycontainer{
        display: flex;
        justify-content: space-between;
        .my_options_box{
            width: 20%;
            text-align: center;
            padding: 10px 0px;
            .my_pc{
                font-size: 24px;
                font-weight: bold;
            }
            .my_pctext{
                margin-top: 6px;
                span{
                    font-size: 14px;
                }
            }
        }
    }
}
.VIP_Img{
    width: 100%;
    height: 70px;
    margin-bottom: 10px;
    background-color: orange;
    img{
        width: 100%;
        height: 100%;
    }
}
.Invitation_Box{
    background-color: #fff;
    margin-bottom: 10px;
    .Mycontainer{
        .Invitation_Code{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #f5f5f5;
            .Invitation_Code_Text{
                .ICT_Title{
                    font-weight: bold;
                }
                .ICT_Tips{
                    font-size: 13px;
                    margin-top: 8px;
                    color: #aaa;
                }
            }
            .arrow_right{
                .ar_Text{
                    padding-right: 15px;
                    font-size: 13px;
                    color: #aaa;
                }
                span.ar_rf{
                    color: #aaa;
                    position: relative;
                    div.ar_dot{
                        position: absolute;
                        top: 4px;
                        left: -10px;
                        width: 1px;
                        height: 1px;
                        content: "";
                        padding: 4px 4px;
                        border-radius: 50%;
                        background-color: rgb(255, 115, 0);
                    }
                }
            }
        }
    }
}
.turnplate_Box{
    background-color: #fff;
    padding: 10px 0px;
    margin-bottom: 10px;
    .Mycontainer{
        display: flex;
        .turnplate{
            width: 20%;
            text-align: center;
            span{
                font-size: 36px;
                color: #ff7300;
            }
            p{
                font-size: 13px;
            }
        }
    }
}
.logOut{
    text-align: center;
    padding: 20px 0px;
    background-color: #fff;
    font-size: 18px;
    color: red;
}
.vanPopup{
    text-align: center;
    .botTitle{
        font-weight: bold;
        font-size: 24px;
        padding: 10px 0px;
    }
    .botInput{
        width: 80%;
        margin: 0px auto;
        input{
            width: 95% ;
            padding: 10px 0px;
            padding-left: 10px;
            border: none;
            background-color: #eee;
            border-radius: 5px;
        }
    }
    .botBtn{
        width: 73%;
        margin: 0px auto;
        padding: 10px ;
        background-color: #fdd528;
        margin-top: 10px;
        border-radius: 20px;
    }
}
</style>